<template>
    <div>
        <div class="bg"></div>
        <MySwiper :images="swiperData" @play="changeBgc" :newColor="lastColor"></MySwiper>
        <itemShow></itemShow>
        <div class="schoolSeason">
            <img src="https://x.dscmall.cn/storage/data/gallery_album/original_img/CPvH5WHHbF0EoG9XjRQbbT3knMVCeEt9DlYGQhJM.png?imageView2/2/format/webp"
                alt="">
        </div>
        <SecondKill v-if="isShow" :data="SecondKillData" @hideSk="hideSk" @showSk="showSk"></SecondKill>
        <GroupArea :data="GroupAreaData"></GroupArea>
        <DynamicDisplay :data="DynamicData1"></DynamicDisplay>
        <DynamicDisplay :data="DynamicData2"></DynamicDisplay>
        <StaticDisplay :data="StaticData1"></StaticDisplay>
        <StaticDisplay :data="StaticData2"></StaticDisplay>
        <ShopRecomd :data="storeData"></ShopRecomd>
        <ul class="tabs">
            <li class="active" @click="clickNav($event, 0)">
                <p>精选</p>
                <span>为你推荐</span>
            </li>
            <li @click="clickNav($event, 1)">
                <p>社区</p>
                <span>新奇好物</span>
            </li>
            <li @click="clickNav($event, 2)">
                <p>新品</p>
                <span>潮流上新</span>
            </li>
            <li @click="clickNav($event, 3)">
                <p>热卖</p>
                <span>火热爆款</span>
            </li>
        </ul>
        <div class="goods_list">
            <goodsList :data="goodsListData1" v-if="tabIndex == 0"></goodsList>
            <CommunityList :data="goodsListData2" v-if="tabIndex == 1"></CommunityList>
            <goodsList :data="goodsListData3" v-if="tabIndex == 2"></goodsList>
            <goodsList :data="goodsListData4" v-if="tabIndex == 3"></goodsList>
        </div>
        <LoadingSpinner v-if="this.isLoadingMore"></LoadingSpinner>
    </div>
</template>

<script>
import ItemShow from '@/components/itemShow.vue'
import MySwiper from '@/components/mySwiper.vue'
import SecondKill from '@/components/secondKill.vue'
import GroupArea from '@/components/GroupArea.vue'
import { GetData, PostData } from '@/api'
import DynamicDisplay from '@/components/dynamicDisplay.vue'
import StaticDisplay from '@/components/staticDisplay.vue'
import ShopRecomd from '@/components/ShopRecomd.vue'
import GoodsList from '@/components/goodsList.vue'
import CommunityList from '@/components/communityList.vue'
import LoadingSpinner from '@/components/LoadingSpinner.vue'

export default {
    props: ["lastColor"],
    data() {
        return {
            swiperData: [
                { img: 'https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg', color: '#e22c2c' },
                { img: 'https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978396430.jpg', color: '#ff583d' },
                { img: 'https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg', color: '#115cf3' },
                { img: 'https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395260.jpg', color: '#00bba6' },
                { img: 'https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978397105.jpg', color: '#3b78ec' }
            ],
            isShow: true,
            SecondKillData: [],
            GroupAreaData: [],
            DynamicData1: {
                data: [],
                img: 'https://x.dscmall.cn/storage/data/gallery_album/original_img/2xrOpGBonnFxQRzbgIEDM55NFSh0YHuTlQtap6Df.jpeg?imageView2/2/format/webp'
            },
            DynamicData2: {
                data: [],
                img: 'https://x.dscmall.cn/storage/data/gallery_album/original_img/Va48nGpd3dmIcsZDkFa7NHc229AMIQOQd8F6kHCZ.jpeg?imageView2/2/format/webp'
            },
            StaticData1: {
                data: [],
                bgc: '#ccb7a1',
                img: 'https://x.dscmall.cn/storage/data/gallery_album/original_img/mq7rYptqRIC6iWYkBUfWzdHGrusH4W1sCAQbHLHj.jpeg?imageView2/2/format/webp'
            },
            StaticData2: {
                data: [],
                bgc: '#2c4d69',
                img: 'https://x.dscmall.cn/storage/data/gallery_album/original_img/CzzkibenhBz3Jcc8clYHc9imT29vc6InLFdKuN0U.jpeg?imageView2/2/format/webp'
            },
            storeData: [],
            tabIndex: 0,
            goodsListData1: {
                data: null,
                page: 1,
                isNoMore: false,
            },
            goodsListData2: {
                data: null,
                page: 1,
                isNoMore: false,
            },
            goodsListData3: {
                data: null,
                page: 1,
                isNoMore: false,
            },
            goodsListData4: {
                data: null,
                page: 1,
                isNoMore: false,
            },
            isLoadingMore: false,

        }
    },
    async created() {
        this.SecondKillData = await PostData('/visual/seckill')
        this.GroupAreaData = await GetData('/visual/visual_team_goods')
        this.DynamicData1.data = await this.getDisplayData([1221, 1220, 1223, 1222, 1219, 697, 938])
        this.DynamicData2.data = await this.getDisplayData([1200, 1198, 1197, 1195, 1201, 1199, 863])
        this.StaticData1.data = await this.getDisplayData([1164, 1159, 1162, 1166, 1167, 1168, 863, 785])
        this.StaticData2.data = await this.getDisplayData([1218, 1217, 1215, 1214, 1212, 1213])
        this.storeData = await PostData('/visual/store')
        this.goodsListData1.data = await this.getGoodsList(1, 10, "is_best")
    },
    mounted() {
        document.querySelector('.bg').style.backgroundColor = this.lastColor
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
    },
    components: {
        MySwiper,
        ItemShow,
        SecondKill,
        GroupArea,
        DynamicDisplay,
        StaticDisplay,
        ShopRecomd,
        GoodsList,
        CommunityList,
        LoadingSpinner
    },
    methods: {
        changeBgc(index) {
            // console.log(index)
            let color = this.swiperData[index].color
            document.querySelector('.bg').style.backgroundColor = color
            this.$emit('changeBgc', color)
        },
        hideSk() {
            this.isShow = false
            console.log('限时秒杀已关闭')
        },
        showSk() {
            this.isShow = true
            console.log('限时秒杀已开启')
        },
        async getDisplayData(goods_id) {
            const jsonData = {
                goods_id
            }
            return await PostData('/visual/checked', jsonData)
        },
        async getGoodsList(page, size, type) {
            return await GetData(`/goods/type_list?page=${page}&size=${size}&type=${type}`)
        },
        async clickNav(e, index) {
            this.tabIndex = index
            const lis = document.querySelectorAll('.tabs li')
            lis.forEach(item => {
                if (item.classList.contains('active')) item.classList.remove('active')
            })
            if (e.target.tagName == 'LI') e.target.classList.add('active')
            if (e.target.tagName == 'P') e.target.parentNode.classList.add('active')
            if (e.target.tagName == 'SPAN') e.target.parentNode.classList.add('active')

            if (index == 1 && this.goodsListData2.data == null) {
                this.isLoadingMore = true
                this.goodsListData2.data = await GetData('/discover/find_list?size=10&page=1')
                this.isLoadingMore = false
            }
            if (index == 2 && this.goodsListData3.data == null) {
                this.isLoadingMore = true
                this.goodsListData3.data = await this.getGoodsList(1, 10, "is_new")
                this.isLoadingMore = false
            }
            if (index == 3 && this.goodsListData4.data == null) {
                this.isLoadingMore = true
                this.goodsListData4.data = await this.getGoodsList(1, 10, "is_hot")
                this.isLoadingMore = false
            }
        },
        async handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            const documentHeight = Math.max(
                document.body.scrollHeight,
                document.documentElement.scrollHeight
            );
            const threshold = 3; // 可根据需要调整阈值
            if (documentHeight - scrollTop - windowHeight <= threshold) {
                // console.log('到达页面底部')
                if (!this.isLoadingMore) {
                    this.isLoadingMore = true

                    if (this.tabIndex == 0 && this.goodsListData1.data!=null) {
                        this.goodsListData1.page++
                        const newData = await this.getGoodsList(this.goodsListData1.page, 10, "is_best")
                        if (newData.length == 0) {
                            this.isLoadingMore = false
                            window.removeEventListener('scroll', this.handleScroll)
                            this.goodsListData1.isNoMore = true
                            return
                        }
                        // console.log('newData:', newData)
                        this.goodsListData1.data = this.goodsListData1.data.concat(newData)
                        setTimeout(() => {
                            this.isLoadingMore = false
                        }, 200)
                    }

                    if (this.tabIndex == 1 && this.goodsListData2.data!=null) {
                        this.goodsListData2.page++
                        const newData = await GetData(`/discover/find_list?size=10&page=${this.goodsListData2.page}`)
                        if (newData.length < 10) {
                            this.isLoadingMore = false
                            window.removeEventListener('scroll', this.handleScroll)
                            this.goodsListData2.isNoMore = true
                            this.goodsListData2.data = this.goodsListData2.data.concat(newData)
                            return
                        }
                        // console.log('newData:', newData)
                        this.goodsListData2.data = this.goodsListData2.data.concat(newData)
                        setTimeout(() => {
                            this.isLoadingMore = false
                        }, 200)
                    }
                    if (this.tabIndex == 2 && this.goodsListData3.data != null) {
                        this.goodsListData3.page++
                        const newData = await this.getGoodsList(this.goodsListData3.page, 10, "is_new")
                        if (newData.length == 0) {
                            this.isLoadingMore = false
                            window.removeEventListener('scroll', this.handleScroll)
                            this.goodsListData3.isNoMore = true
                            return
                        }
                        // console.log('newData:', newData)
                        this.goodsListData3.data = this.goodsListData3.data.concat(newData)
                        setTimeout(() => {
                            this.isLoadingMore = false
                        }, 200)
                    }
                    if (this.tabIndex == 3 && this.goodsListData4.data != null) {
                        this.goodsListData4.page++
                        const newData = await this.getGoodsList(this.goodsListData4.page, 10, "is_hot")
                        if (newData.length == 0) {
                            this.isLoadingMore = false
                            window.removeEventListener('scroll', this.handleScroll)
                            this.goodsListData4.isNoMore = true
                            return
                        }
                        // console.log('newData:', newData)
                        this.goodsListData4.data = this.goodsListData4.data.concat(newData)
                        setTimeout(() => {
                            this.isLoadingMore = false
                        }, 200)
                    }
                }
            }
            if(scrollTop<500){
                this.isLoadingMore=false
            }
        }
    }
}
</script>

<style scoped>
.bg {
    width: 100%;
    height: 16vw;
    border-radius: 0 0 5.3333vw 5.3333vw;
    position: absolute;
    background-color: #e22c2c;
}

.schoolSeason {
    width: 94.6667vw;
    margin: 2.6667vw auto;
}

.schoolSeason img {
    width: 100%;
    object-fit: cover;
}

.tabs {
    width: 100%;
    margin: 5.3333vw 0;
    height: 10.6667vw;
    display: flex;

    li {
        width: 25%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.3333vw;
    }

    li::after {
        content: '';
        position: absolute;
        width: .2667vw;
        height: 9.6vw;
        background-color: #ccc;
        right: 0;
        top: 0;
    }

    li:last-of-type::after {
        width: 0;
    }

    p {
        font-size: 4.2667vw;
        font-weight: bold;
    }

    span {
        font-size: 3.2vw;
        width: 16vw;
        padding: .8vw;
    }

    li.active span {
        background-color: red;
        color: #fff;

        border-radius: 2.6667vw;
    }
}
.nomore {
    font-size: 5.3333vw;
    color: #ccc;
}
</style>